import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Button, CountDown } from "react-vant";
type Props = {};

const Payment = (props: Props) => {
  const navigate = useNavigate();
  const location = useLocation();
  const num: any = localStorage.getItem("num");
  const [obj, setObj] = useState(location.state);
  const gofilling = () => {
    //返回上一页
    navigate("/index/order");
  };
  const obj1 = JSON.parse(localStorage.getItem("obj") as any) || {};

  const date = (localStorage.getItem("date") as any) || "";
  return (
    <div className="details">
      <header>
        <div className="box1">
          <span onClick={gofilling} style={{ fontSize: "26px" }}>
            {"<"}
          </span>
          <span>订单详情</span>
          <span></span>
        </div>
        <div className="box2">
          <span style={{ color: "red", fontWeight: "800", fontSize: "16px" }}>
            待支付
          </span>
          <span>
            支付剩余:
            <span style={{ color: "orange" }}>
              <CountDown time={60 * 60 * 1000} />分
            </span>
          </span>
        </div>
      </header>
      <main>
        <div className="box1">
          <p>取票号:{obj.dbnumber}</p>
          <div className="box1-box">
            <div className="zuo">
              <span>{date}</span>
              <h2>{obj1.starttime}</h2>
              <span>{obj1.start}</span>
            </div>
            <div className="zhong">
              <span> —经停信息—</span>
              <span>{obj1.train}</span>
            </div>
            <div className="you">
              <span>{date}</span>
              <h2>{obj1.endtime}</h2>
              <span>{obj1.end}</span>
            </div>
          </div>
          <div className="box1-box1">
            <div>
              <span style={{ fontWeight: "800" }}>{obj.name}</span>
              <span style={{ fontSize: "14px" }}>二等座￥{obj.price}元</span>
            </div>
            <div>
              <span style={{ color: "#ccc", fontSize: "14px" }}>
                {obj.idnumber}
              </span>
              <span>
                <span
                  style={{
                    color: "rgb(138,219,180)",
                    padding: "3px 5px",
                    border: "1px solid #ccc",
                    borderRadius: "10px",
                    marginRight: "10px",
                    fontSize: "12px",
                  }}
                >
                  靠窗
                </span>
                <span style={{ fontSize: "12px" }}> {obj.train}</span>
              </span>
            </div>
            <div style={{ color: "rgb(138,219,180)", fontSize: "14px" }}>
              待支付
            </div>
          </div>
        </div>
        <div style={{ width: "100%", height: "160px" }}></div>
        <div className="box2">
          <p style={{ borderBottom: "1px solid #e5e5e5" }}>
            <span>订单号</span>
            <span>{obj.ordernumber}</span>
          </p>
          <p>
            <span>通知手机</span>
            <span>{obj.tel}</span>
          </p>
        </div>
        <div className="box3">
          <p style={{ borderBottom: "1px solid #e5e5e5" }}>
            <span>成人票</span>
            <span>
              ￥{obj.price}x{1}张
            </span>
          </p>
          <p>
            <span>订单总计</span>
            <span
              style={{ fontWeight: "800", color: "orange", fontSize: "16px" }}
            >
              ￥{obj.price * 1}
            </span>
          </p>
        </div>
      </main>
      <footer>
        <Button color="orange" round size="large">
          去支付
        </Button>
      </footer>
    </div>
  );
};

export default Payment;
